<template>
  <div class="federation-container">
    <!-- 页面标题 -->
    <el-page-header @back="goBack" title="返回首页">
      <template #content>
        <h1 class="page-title">加入联邦学习协作</h1>
      </template>
    </el-page-header>

    <!-- 联邦学习介绍 -->
    <el-card class="intro-card">
      <h2>什么是联邦学习？</h2>
      <p>
        联邦学习是一种分布式机器学习方法，允许多个参与方在不共享原始数据的情况下协作训练模型。
        您的数据始终保留在本地，只有模型参数或梯度会被安全加密传输。
      </p>
      <el-divider />
      <h3>参与流程</h3>
      <el-steps :active="activeStep" finish-status="success" align-center>
        <el-step title="选择项目" description="从可用项目中选择要参与的任务" />
        <el-step title="配置节点" description="设置计算资源和网络参数" />
        <el-step title="加入训练" description="开始参与联邦模型训练" />
        <el-step title="获取模型" description="训练完成后获得最终模型" />
      </el-steps>
    </el-card>

    <!-- 可用项目列表 -->
    <el-card class="projects-card">
      <template #header>
        <div class="card-header">
          <span>可加入的项目</span>
          <el-input
              v-model="searchQuery"
              placeholder="搜索项目..."
              style="width: 200px"
              clearable
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </div>
      </template>

      <el-table :data="filteredProjects" style="width: 100%">
        <el-table-column prop="name" label="项目名称" width="180" />
        <el-table-column prop="description" label="项目描述" />
        <el-table-column prop="participants" label="参与节点数" width="120">
          <template #default="{ row }">
            <el-tag>{{ row.participants }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="120">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">
              {{ row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="{ row }">
            <el-button
                type="primary"
                size="small"
                @click="joinProject(row)"
                :disabled="row.status !== '招募中'"
            >
              加入
            </el-button>
            <el-button size="small" @click="viewDetails(row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 加入联邦对话框 -->
    <el-dialog v-model="joinDialogVisible" title="加入联邦项目" width="50%">
      <el-form :model="joinForm" label-width="120px">
        <el-form-item label="项目名称">
          <el-input v-model="selectedProject.name" disabled />
        </el-form-item>
        <el-form-item label="计算资源">
          <el-select v-model="joinForm.resourceLevel" placeholder="请选择">
            <el-option
                v-for="item in resourceOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="参与轮次">
          <el-slider
              v-model="joinForm.rounds"
              :min="1"
              :max="20"
              show-input
          />
        </el-form-item>
        <el-form-item label="数据贡献">
          <el-radio-group v-model="joinForm.dataContribution">
            <el-radio-button label="full">完整数据</el-radio-button>
            <el-radio-button label="partial">部分数据</el-radio-button>
            <el-radio-button label="none">仅计算</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="joinDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmJoin">确认加入</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Search } from '@element-plus/icons-vue'
import router from '@/router'


// 当前步骤
const activeStep = ref(0)

// 搜索查询
const searchQuery = ref('')

// 项目数据
const projects = ref([
  {
    id: 1,
    name: '医疗影像分类',
    description: '基于联邦学习的多中心医疗影像分类研究',
    participants: 142,
    status: '招募中',
    startDate: '2023-05-10',
    organizer: 'AI医疗联盟'
  },
  {
    id: 2,
    name: '金融风控模型',
    description: '跨机构金融风控联合建模',
    participants: 89,
    status: '训练中',
    startDate: '2023-04-15',
    organizer: '金融科技协会'
  },
  {
    id: 3,
    name: '智能推荐系统',
    description: '保护用户隐私的跨平台推荐系统',
    participants: 256,
    status: '招募中',
    startDate: '2023-06-01',
    organizer: '电商联盟'
  },
  {
    id: 4,
    name: '工业缺陷检测',
    description: '多工厂协同的工业质检模型',
    participants: 53,
    status: '已结束',
    startDate: '2023-03-20',
    organizer: '智能制造协会'
  }
])

// 过滤后的项目
const filteredProjects = computed(() => {
  return projects.value.filter(project =>
      project.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      project.description.toLowerCase().includes(searchQuery.value.toLowerCase()))
})

// 获取状态标签类型
const getStatusType = (status) => {
  const statusMap = {
    '招募中': 'success',
    '训练中': 'warning',
    '已结束': 'info'
  }
  return statusMap[status] || ''
}

// 加入对话框相关
const joinDialogVisible = ref(false)
const selectedProject = ref({})
const joinForm = ref({
  resourseLevel: 'medium',
  rounds: 5,
  dataContribution: 'full'
})

const resourceOptions = [
  { value: 'low', label: '低 (CPU 2核 4GB)' },
  { value: 'medium', label: '中 (CPU 4核 8GB)' },
  { value: 'high', label: '高 (GPU 1卡 16GB)' }
]

// 加入项目
const joinProject = (project) => {
  selectedProject.value = project
  joinDialogVisible.value = true
}

// 确认加入
const confirmJoin = () => {
  ElMessage.success(`成功加入项目: ${selectedProject.value.name}`)
  joinDialogVisible.value = false
  // 这里可以添加实际加入逻辑
}

// 查看详情
const viewDetails = (project) => {
  router.push(`/project/${project.id}`)
}

// 返回首页
const goBack = () => {
  router.push('/')
}
</script>

<style scoped>
.federation-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.page-title {
  margin: 0;
  font-size: 1.8rem;
}

.intro-card {
  margin: 20px 0;
  padding: 20px;
}

.intro-card h2 {
  color: #409EFF;
  margin-bottom: 15px;
}

.intro-card p {
  line-height: 1.6;
  color: #606266;
}

.projects-card {
  margin-top: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-table {
  margin-top: 15px;
}
</style>